<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局css</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        p {
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 背景色 -->
    <p class="bg-primary">我爱王燕,超级爱,爱一辈子!</p>
    <p class="bg-success">我爱王燕,超级爱,爱一辈子!</p>
    <p class="bg-info">我爱王燕,超级爱,爱一辈子!</p>
    <p class="bg-warning">我爱王燕,超级爱,爱一辈子!</p>
    <p class="bg-danger">我爱王燕,超级爱,爱一辈子!</p>
    <!-- 表格 -->
    <table class="table table-hover">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
    <!-- 可用的变体 -->
    <span class="label label-default">王燕大美人</span>
    <span class="label label-primary">王燕大美人</span>
    <span class="label label-success">王燕大美人</span>
    <span class="label label-info">王燕大美人</span>
    <span class="label label-warning">王燕大美人</span>
    <span class="label label-danger">王燕大美人</span>
    <!-- 展示条 -->
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
          <span class="sr-only">40% Complete (success)</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
          <span class="sr-only">60% Complete (warning)</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
          <span class="sr-only">80% Complete (danger)</span>
        </div>
      </div>
      <form class="navbar-form navbar-left" role="search">
          <!-- 搜索框 -->
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">开始搜索</button>
      </form>
      <!-- 按钮目录 -->
      <div class="list-group">
        <button type="button" class="list-group-item">I LOVE YOU WangYan</button>
        <button type="button" class="list-group-item">I LOVE YOU WangYan</button>
        <button type="button" class="list-group-item">I LOVE YOU WangYan</button>
        <button type="button" class="list-group-item">I LOVE YOU WangYan</button>
        <button type="button" class="list-group-item">I LOVE YOU WangYan</button>
      </div>
</body>

</html>